<template>
    <div>
        <!--
            条件查询
        -->
        <el-form :model="queryForm" ref="queryForm" inline="b" size="mini" >
            <el-form-item label="姓名">
                <el-input v-model="queryForm.tname"></el-input>
            </el-form-item>
            <el-form-item label="课程">
                <el-select clearable v-model="queryForm.majorid" placeholder="请选择课程">
                    <el-option v-for="ma in marlist" :key="ma.majorid" :label="ma.majorname" :value="ma.majorid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button type="primary" @click="add">添加</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="majorid"
                    label="课程"
                    width="180" :formatter="formartterMajor">
            </el-table-column>
            <el-table-column
                    prop="tname"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="hiredate"
                    label="日期"
                    width="180" :formatter="formartterDate">
            </el-table-column>
            <el-table-column
                    prop="tsex"
                    label="性别"
                    width="180" :formatter="formartterSex">
            </el-table-column>
            <el-table-column
                    prop="salary"
                    label="工资"
                    width="180">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="update(scope.row.tid)" type="text" size="small">修改</el-button>
                    <el-button @click="del(scope.row.tid)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--
            分页查询
        -->
        <el-pagination
                layout="prev, pager, next"
                @current-change="changePage"
                :page-size="queryForm.size"
                :total="total">
        </el-pagination>

        <!--
            新增和修改的页面代码
        -->
        <el-dialog :title="title" :visible.sync="open">
            <el-form :model="form" :rules="rules" ref="form" label-width="80px" >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="课程" prop="majorid">
                            <el-select v-model="form.majorid" placeholder="请选择课程">
                                <el-option v-for="ma in marlist" :key="ma.majorid" :label="ma.majorname" :value="ma.majorid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="tname">
                            <el-input v-model="form.tname" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="入校日期" prop="hiredate">
                            <el-date-picker
                                    v-model="form.hiredate"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工资" prop="salary">
                            <el-input v-model="form.salary" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open  = false">取 消</el-button>
                <el-button type="primary" @click="submitform">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {list, add, del, get, update} from "@/api/tea";
    import {list as listmar} from "@/api/mar";
    import moment from "moment";

    export default {
        name: "list-index",
        data() {
            return {
                tableData: [],
                open: false,
                form: {},
                queryForm: {
                    page: 1,
                    size: 3
                },
                total: 0,
                marlist: [],
                title: '',
                teachers: {
                    tname : '',
                },
                rules: {
                    majorid: [
                        { required: true, message: '请选择课程', trigger: 'change' },
                    ],
                    tname: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    hiredate: [
                        { required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    salary: [
                        {required: true, message: '请输入工资', trigger: 'blur' }
                    ],

                }
            }
        },

        created() {
            this.loadData();
            listmar().then(resp => {
                this.marlist = resp;
            })
        },

        methods: {

            loadData(){
                list(this.queryForm).then(resp => {
                    this.tableData = resp.list;
                    this.total = resp.total;
                })
            },

            add(){
                this.open = true;
                this.title = "添加用户";
                this.form = {}
            },

            submitform(){
              this.$refs.form.validate(valid => {
                  if (valid){
                      if (this.form.tid){
                          update(this.form).then(resp => {
                              if (resp == 1){
                                  this.$message.success('修改成功')
                                  this.loadData();
                              }else{
                                  this.$message.error('修改失败')
                              }
                              this.open = false;
                          })
                      }else {
                          add(this.form).then(resp => {
                              if (resp == 1){
                                  this.$message.success('新增成功')
                                  this.loadData();
                              }else {
                                  this.$message.error('新增失败')
                              }
                              this.open = false;
                          })
                      }
                  }
              })
            },

            update(tid) {
                this.open = true;
                this.title = "修改用户";
                get(tid).then(resp => {
                    this.form = resp;
                })
            },

            del(tid) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del(tid).then(resp => {
                        if (resp == 1){
                            this.$message.success('删除成功');
                            this.loadData();
                        }else{
                            this.$message.error('删除失败，这是一条错误消息');
                        }
                    })
                })
            },

            formartterSex(row) {
                if (row.tsex == 1){
                    return '男'
                }else if (row.tsex == 0){
                    return '女'
                }else {
                    return '未知';
                }
            },

            formartterDate(row){
                var date = row.hiredate;
                if (date == undefined){
                    date = '';
                }
                return moment(date).format("YYYY-MM-DD HH:mm:ss")
            },

            formartterMajor(row){
                if (row.majorid==1){
                    return 'C#'
                }else  if (row.majorid==2){
                    return 'JAVA'
                }else   if (row.majorid==3){
                    return 'IOS'
                }else  if (row.majorid==4){
                    return 'Android'
                }
            },

            query(){
                this.queryForm.page = 1;
                this.loadData();
            },

            changePage(page){
                this.queryForm.page = page;
                this.loadData();
            }

        }
    }

</script>

<style scoped>

</style>